<template>
<view>
<!--pages/shebao/paydetail/paydetail.wxml-->
<view class="all-box">
  <view class="all-text">{{paymentAll}}</view>
  <view class="alldw">缴纳总额（元）</view>
  <view class="pay-box">
    <view class="count-box">
      <view class="num-text">{{personSum}}</view>
      <view class="dw-text">个人缴纳（元）</view>
    </view>
    <view class="line"></view>
    <view class="count-box">
      <view class="num-text">{{comidSum}}</view>
      <view class="dw-text">单位缴纳（元）</view>
    </view>
  </view>
</view>

<view class="detail-box">

  <view class="title-box">
    <text v-for="(item, index) in project" :key="index" class="context">{{item}}</text>
  </view>

  <view class="count-box">
    <view v-for="(item, index) in details" :key="index" class="item-box">
      <text class="item-text">{{item.name}}</text>
      <text class="item-text">{{item.person==0?'/':item.person}}</text>
      <text class="item-text">{{item.comid}}</text>
    </view>
  </view>
</view>
</view>
</template>

<script>
import util from "../../../../utils/util";
const app = getApp();
var num = {};

export default {
  data() {
    return {
      city: "深圳",
      project: ["项目", "个人缴纳(元）", "单位缴纳(元）"],
      scroll: false,
      paymentAll: "",
      personSum: "",
      comidSum: "",
      details: [],
      computeData: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      computeData: JSON.parse(options.computeData)
    });
    util.getUrl(app.globalData.url).then(res => {
      util.request("zhuanti.php", {
        action: "wuxianyijin",
        citycode: this.computeData.city,
        type: this.computeData.type
      }).then(res => {
        if (res.data.message == "success") {
          num = res.data.data.ss;
          this.computePayment(this.computeData);
        }
      });
    });
  },
  methods: {
    computePayment(computeData) {
      let yanglao = {
        per: computeData.baseNum * num.yanglao.per,
        com: computeData.baseNum * num.yanglao.com
      };
      let gongshang = {
        per: computeData.baseNum * num.gongshang.per,
        com: computeData.baseNum * num.gongshang.com
      };
      ;
      let shengyu = {
        per: computeData.baseNum * num.shengyu.per,
        com: computeData.baseNum * num.shengyu.com
      };
      ;
      let yiliao = {
        per: computeData.baseNum * num.yiliao.per,
        com: computeData.baseNum * num.yiliao.com
      };
      ;
      let shiye = {
        per: computeData.baseNum * num.shiye.per,
        com: computeData.baseNum * num.shiye.com
      };
      ;
      let personSum = parseFloat(yanglao.per) + parseFloat(gongshang.per) + parseFloat(shengyu.per) + parseFloat(yiliao.per) + parseFloat(shiye.per);
      let comidSum = parseFloat(yanglao.com) + parseFloat(gongshang.com) + parseFloat(shengyu.com) + parseFloat(yiliao.com) + parseFloat(shiye.com);
      let paymentAll = personSum + comidSum;
      this.setData({
        details: [{
          name: '养老保险',
          person: yanglao.per.toFixed(2),
          comid: yanglao.com.toFixed(2)
        }, {
          name: '医疗保险',
          person: gongshang.per.toFixed(2),
          comid: gongshang.com.toFixed(2)
        }, {
          name: '工伤保险',
          person: shengyu.per.toFixed(2),
          comid: shengyu.com.toFixed(2)
        }, {
          name: '生育保险',
          person: yiliao.per.toFixed(2),
          comid: yiliao.com.toFixed(2)
        }, {
          name: '失业保险',
          person: shiye.per.toFixed(2),
          comid: shiye.com.toFixed(2)
        }],
        personSum: personSum.toFixed(2),
        comidSum: comidSum.toFixed(2),
        paymentAll: paymentAll.toFixed(2)
      });

      if (computeData.payment && computeData.proportion && computeData.payBaseNum) {
        this.details.push({
          name: "公积金",
          person: (computeData.payBaseNum * computeData.proportion * 0.01).toFixed(2),
          comid: (computeData.payBaseNum * computeData.proportion * 0.01).toFixed(2)
        });
        this.personSum = parseFloat(this.personSum) + computeData.payBaseNum * computeData.proportion * 0.01;
        this.comidSum = parseFloat(this.comidSum) + computeData.payBaseNum * computeData.proportion * 0.01;
        this.paymentAll = this.personSum + this.comidSum;
        this.setData({
          details: this.details,
          personSum: this.personSum.toFixed(2),
          comidSum: this.comidSum.toFixed(2),
          paymentAll: this.paymentAll.toFixed(2)
        });
      }
    }
    /**
     * 用户点击右上角分享
     */


  }
};
</script>
<style>
/* pages/shebao/paydetail/paydetail.wxss */

.all-box {
    height: 400rpx;
    opacity: 1;
    background: linear-gradient(255deg, rgba(255, 170, 0, 1) 0%, rgba(255, 102, 0, 1) 100%);
}

.all-text {
    font-size: 74rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    text-align: center;
    padding-top: 100rpx;
}

.alldw {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    text-align: center;
}

.pay-box {
    height: 200rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.11);
    opacity: 1;
    border-radius: 6rpx;
    margin: 66rpx 35rpx 0rpx 35rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.count-box {
    display: flex;
    flex-direction: column;
}

.num-text {
    font-size: 44rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(35, 35, 35, 1);
    opacity: 1;
}

.dw-text {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(142, 142, 142, 1);
    opacity: 1;
    margin-top: 10rpx;
}

.line {
    height: 108rpx;
    border: 1px solid rgba(112, 112, 112, 1);
    opacity: 0.11;
}

.detail-box {
    margin: 150rpx 40rpx 0rpx 40rpx;
}

.title-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.context {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(35, 35, 35, 1);
    opacity: 1;
}

.context:nth-child(1) {
    margin-left: 25rpx;
}

.context:nth-child(2) {
    margin-left: 65rpx;
}

.item-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f5f5f5;
    margin-top: 30rpx;
    padding-bottom: 20rpx;
}

.item-text {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(142, 142, 142, 1);
    opacity: 1;
    margin-right: 30rpx;
}

.item-box .item-text:first-child {
    min-width: 110rpx;
}

.item-box .item-text:nth-child(2) {
    min-width: 90rpx;
}
</style>